<template>
  <main-content title="券批次审核">
    <template #tab-bar>
      <el-radio-group
        v-model="searchForm.verifyStatus"
      >
        <el-radio-button
          v-for="item in verifyStausList"
          :key="item.resKey"
          :label="item.queryKey"
        >
          {{ item.label }}({{ item.count }})
        </el-radio-button>
      </el-radio-group>
    </template>

    <template #search-bar>
      <SearchBar inline>
        <template #normal>
          <el-form-item label="优惠券名称">
            <el-input
              v-model="searchForm.couponName"
              clearable
              placeholder="请输入优惠券名称"
            />
          </el-form-item>
          <el-form-item label="批次名称">
            <el-input
              v-model="searchForm.batchName"
              clearable
              placeholder="请输入批次名称"
            />
          </el-form-item>
        </template>
        <template #toolbar>
          <el-form-item>
            <el-button
              type="primary"
              @click="research"
            >
              查询
            </el-button>
          </el-form-item>
        </template>
      </SearchBar>
    </template>

    <LayoutTable
      ref="tableRef"
      url="merchant/coupon/couponVerifyPage"
      :param="searchForm"
    >
      <el-table-column
        label="操作描述"
        width="210"
        prop="operationType"
      >
        <template #default="prop">
          <span v-if="prop.row.operationType === 0">启用批次审核</span>
          <span v-if="prop.row.operationType === 1">禁用批次审核</span>
        </template>
      </el-table-column>

      <el-table-column
        label="批次名称"
        min-width="210"
        prop="couponBatchName"
      />
      
      <el-table-column
        label="优惠券名称"
        min-width="210"
        prop="couponName"
      />
      
      <el-table-column
        label="优惠券数量"
        width="150"
      >
        <template #default="{row}">
          {{ row?.couponNum ?? '0' }}
        </template>
      </el-table-column>

      <el-table-column
        label="使用开始时间"
        width="200"
      >
        <template #default="{row}">
          {{ getTakeEffectTypeLabel(row.takeEffectType) }}
        </template>
      </el-table-column>

      <el-table-column
        label="使用结束时间"
        width="280"
      >
        <template #default="{row}">
          <div v-if="row.useType === 0">
            固定时间{{ formatTime(row.useFixEndTime) }}内均可使用
          </div>
          <div v-if="row.useType === 1">
            相对开始时间{{ row.useDayNum }}天内可使用
          </div>
          <div v-if="row.useType === 2">
            相对开始时间{{ row.useMonthNum }}个月内可使用
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="审核状态"
        width="120px"
      >
        <template #default="{row}">
          <div class="verify-status-column">
            <el-tag v-if="row.verifyStatus === 0">
              待审核
            </el-tag>
            <el-tag
              v-if="row.verifyStatus === 1"
              type="success"
            >
              通过
            </el-tag>
            <el-tag
              v-if="row.verifyStatus === 2"
              type="danger"
            >
              拒绝
            </el-tag>

            <el-tooltip
              v-if="row.verifyStatus === 2 && row.remark"
              effect="dark"
              :content="row.remark"
              placement="top"
              class="remark"
            >
              <el-icon>
                <Tickets />
              </el-icon>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="提交时间"
        width="200"
      >
        <template #default="props">
          {{ formatTime(props.row.createTime) }}
        </template>
      </el-table-column>

      <el-table-column
        label="审核时间"
        width="210"
      >
        <template #default="props">
          {{ formatTime(props.row.verifyTime) }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作人"
        width="140"
        prop="checkName"
      />

      <el-table-column
        label="操作"
        fixed="right"
        width="100"
      >
        <template #default="props">
          <el-button
            v-if="props.row.verifyStatus !== 1 && props.row.verifyStatus !== 2"
            type="primary"
            link
            @click="showVerifyDialog(props.row)"
          >
            审核
          </el-button>
        </template>
      </el-table-column>
    </LayoutTable>

    <Dialog
      v-model="isShowVerifyDialog"
      v-loading="submitLoading"
      title="券批次审核"
      destroy-on-close
      @confirm="_verifyCoupon"
    >
      <el-form
        ref="verifyFormRef"
        :model="verifyForm"
        :rules="verifyFormRules"
        label-width="90px"
      >
        <el-form-item
          prop="verifyStatus"
          label="批次审核"
        >
          <el-radio-group v-model="verifyForm.verifyStatus">
            <el-radio :label="1">
              通过
            </el-radio>
            <el-radio :label="2">
              拒绝
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          prop="remark"
          label="备注"
        >
          <el-input
            v-model="verifyForm.remark"
            type="textarea"
            :rows="5"
            :show-word-limit="true"
            :maxlength="100"
          />
        </el-form-item>
      </el-form>
    </Dialog>
  </main-content>
</template>

<script setup lang="ts">
import type { Ref } from "vue";
import type { IVerifyCouponRow, IVerifyCouponStatics } from "@/api/modules/marketingTool"
import moment from "moment"
import { useTakeEffectType } from "@/views/marketingTool/compositions/useTakeEffectType"
import { verifyCoupon, getVerifyCouponBatchStatics } from "@/api/marketingTool"


const { getTakeEffectTypeLabel } = useTakeEffectType()

const searchForm = reactive({
  verifyStatus: null,
  couponName: "",
  batchName: "",
})

const verifyStausList = ref([ {
  queryKey: null,
  resKey: 'allNum',
  label: '全部批次',
  count: 0
}, {
  queryKey: 0,
  resKey: 'waitVerifyNum',
  label: '待审核',
  count: 0
}, {
  queryKey: 1,
  resKey: 'verifyPassNum',
  label: "通过",
  count: 0,
}, {
  queryKey: 2,
  resKey: 'verifyRefuseNum',
  label: "拒绝",
  count: 0
} ])

const tableRef = ref();
const research = () => {
  _getVerifyCouponBatchStatics();
  tableRef.value.research();
}
const verifyFormRef = ref()
const verifyFormRules = computed(() => ({
  verifyStatus: [ {
    message: "请选择审核状态",
    trigger: "change",
    required: true
  } ],
  remark: [ {
    message: "请输入审核备注",
    trigger: "blur",
    required: verifyStatusModel.value === 2 // 审核拒绝时 必须
  } ]
}))

const verifyForm = ref({
  verifyStatus: 1,
  remark: ""
})

const verifyStatusModel = computed(() => {
  return verifyForm.value.verifyStatus
})

const formatTime = (timestamp: number) => {
  return timestamp ? moment(timestamp).format("YYYY.MM.DD HH:mm:ss") : ''
}

const isShowVerifyDialog = ref(false)
const currentRow:Ref<IVerifyCouponRow | undefined> = ref()
const showVerifyDialog = (row: IVerifyCouponRow) => {
  currentRow.value = row
  isShowVerifyDialog.value = true
}

const submitLoading = ref(false)
const _verifyCoupon = async () => {
  submitLoading.value = true;
  const rs = await verifyCoupon({
    id: currentRow.value?.id ?? -1,
    ...verifyForm.value
  })
  submitLoading.value = false;

  if (rs.code === 200) {
    isShowVerifyDialog.value = false;
    ElMessage.success("审核成功");
    research()
    nextTick(() => {
      verifyFormRef.value.resetFields()
    })
  }
}

const _getVerifyCouponBatchStatics = async () => {
  const rs = await getVerifyCouponBatchStatics()

  if (rs.code === 200 && rs.payload) {
    verifyStausList.value.forEach(item => {
      item.count = rs.payload?.[item.resKey] ?? 0
    })
  }
}

onMounted(() => {
  _getVerifyCouponBatchStatics()
})
</script>

<style scoped lang="scss">
.verify-status-column {
  display: flex;
  align-items: center;
 
  :deep(.el-icon) {
    margin-left: 10px;
  }
}
</style>